<!--Generate by Kevin's CodeBuilder -->
<!--请注意！这里是页面片段，定义的标签ID，js变量不要与index.html列表页面重复-->
<!--如果是较复杂的页面，可以修改window的数据类型(dataType: iframe),然后将form.html改为完整的页面,实现iframe隔离，需要修改curdObj的访问方式为parent.curdObj-->
<div id="form_container" class="form_container">
		<!--利用隐藏的id标签区分是新增/编辑-->
		<input type="hidden" id="id" name="id" th:value="*{id}"/>
		<table class="form_table">
				<tr>
					<td class="label label30">[(${Lang.dict_typeid})]</td>
					<td><input id="typeid" name="typeid" class="form_input form_input50" type="text"/></td>
				</tr>
				<tr>
					<td class="label label30">[(${Lang.dict_dkey})]</td>
					<td><input id="dkey" name="dkey" class="form_input form_input50" type="text"/></td>
				</tr>
				<tr>
					<td class="label label30">[(${Lang.dict_dvalue})]</td>
					<td><input id="dvalue" name="dvalue" class="form_input form_input50" type="text"/></td>
				</tr>
				<tr>
					<td class="label label30">[(${Lang.dict_desp})]</td>
					<td><input id="desp" name="desp" class="form_input form_input50" type="text"/></td>
				</tr>
				<tr>
					<td class="label label30">[(${Lang.dict_extFiled})]</td>
					<td><input id="extFiled" name="extFiled" class="form_input form_input50" type="text"/></td>
				</tr>
				<tr>
					<td class="button_td" colspan="2">
						<button id="button_submit" class="common_button"><i class="fa fa-floppy"></i>[(${Lang.common_save})]</button>
						<button id="button_goback"  class="common_button"><i class="fa fa-reply-all"></i>[(${Lang.common_goback})]</button>					
					</td>
				</tr>
		</table>
</div>
<script type="application/javascript" th:inline="javascript">
		var $form,
			entityJson,     //表单对应的实体数据对象
			vm,             //mvvm双向联动实例
			idValue;        //用于区分新增,编辑
		$(function(){
			$form = $("#form_container");
			idValue = $form.find("#id").val();
			/**创建mvvm表单，将实体json绑定到表单**/
			if(idValue === ""){
				entityJson = $B.parseForm($form);  //新增场景下，从表单中提取实体JSON
			}else{
				entityJson = [(${entityJson})];    //更新场景下，取服务器返回的实体JSON
			}
			vm = $B.bindForm($form, entityJson);   //将实体数据绑定为mvvm表单			
			$form.find("#button_goback").click(function(){      //返回按钮，关闭窗口
				curdObj.closeWindow();
			});
			var validObj = new $B.Validate({  //创建校验
				typeid: [{rule:'require'}],
				dkey: [{rule:'require'}],
				dvalue: [{rule:'require'}]
            }, $form);
			$form.find("#button_submit").submit(function(){    //提交表单数据
				if(validObj.valid($form)){                     //调用验证
					var json = vm.getJson();                   //从双向mvvm实例中获取需要提交的json数据
					if(idValue === ""){
						curdObj.add(json);                     //调用curdObj实例的 新增 add api          
					}else{
						curdObj.update(json);                  //调用curdObj实例的更新 update api
					}
				}
			});			
		});
</script>
